<template>
    <div>
        <!-- 标志 -->
        <div class="logoAndLogin">
            <div class="logo clearFix">
                <router-link to="/home" title="大众点评网">
                    <img src="@/assets/images/logo.png" alt="logo">
                </router-link>
                <span class="login">
                    注册
                </span>
            </div>
        </div>

        <!-- 组成 -->
        <div class="center">
            <div class="login-wrap">
                <div class="loginUp">
                    <p class="shortcut">手机号快速注册</p>
                    <div class="input">
                        <select name="" id="">
                            <option>中国 +86</option>
                            <option>香港(中国) +852</option>
                            <option>澳门(中国) +853</option>
                            <option>台湾(中国) +886</option>
                        </select>
                        <input 
                            placeholder="手机号" 
                            class="phone" 
                            v-model="phone" 
                            type="text"
                        >
                        <input 
                            placeholder="请输入动态码" 
                            type="text" 
                            v-model="code" 
                            class="code"
                        >
                        <button class="getCode" @click="getCode">获取动态码</button>
                        <input 
                            placeholder="密码长度8-32位字符" 
                            v-model="password" 
                            class="password" 
                            type="text"
                        >
                        <p>提示:密码应包含数字、大小写字母、特殊字符中的两种或两种以上</p>
                        <button class="register" @click="register">立即注册</button>
                    </div>
                    <input 
                        :checked="check" 
                        class="checkbox" 
                        type="checkbox" 
                        @click="changeCheck"
                    />
                    <span class="agreement">
                        阅读并同意大众点评网以下政策协议:
                        <p>
                            &nbsp;&nbsp;&nbsp;《<a>美团用户服务协议</a>》、《<a>隐私政策</a>》
                        </p>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                phone:'',                   //手机号
                code:'',                    //验证码
                password:'',                //密码
                check:false,                //勾选协议
            };
        },
        methods:{
            //验证码
            getCode(){
                let value = parseInt(Math.random()*1000000+99999);
                this.code = value
            },

            //勾选协议
            changeCheck(){
                this.check = !this.check
            },

            //注册
            register(){
                const {phone,code,password,check} = this
                if(!phone.trim() && !/^[1][3-9]\d{9}$/.test(phone.trim())){
                    this.$message({
                        message:'手机号不符合规则',
                        type:'info'
                    })
                    return
                }
                if(!code){
                    this.$message({
                        message:'请先获取验证码',
                        type:'info'
                    })
                    return
                }
                if(!password){
                    this.$message({
                        message:'密码不能为空',
                        type:'info'
                    })
                    return
                }
                if(!check){
                    this.$message({
                        message:'请先勾选协议',
                        type:'info'
                    })
                    return
                }
                this.$store.dispatch('getRegister',{phone,password})
            }
        },

        //挂载后给 body 添加一个类名
        mounted(){
            document.querySelector('body').className = 'registerOverall'
        },
        //卸载前将 body 中的类名删除
        beforeDestroy(){
            document.body.removeAttribute('class','registerOverall')
        }
    };
</script>

<style lang="css" scoped>

/* 标志样式 */
.logoAndLogin{
    margin: 20px 0;
}
.logoAndLogin .logo{
    width: 1190px;
    margin: 0 auto;
}
.logoAndLogin .logo a{
    display: block;
    float: left;
}
.logoAndLogin .logo a img{
    height: 40px;
}
.logoAndLogin .logo .login{
    float: left;
    font-size: 20px;
    border-left: 1px solid #DCDCDC;
    margin: 6px 0 0 25px;
    padding-left: 20px;
}

/* 中间登录样式 */
.center{
    height: 510px;
}
.center .login-wrap{
    width:1190px;
    height: 100%;
    margin: 0 auto;
    background-image: url(~@/assets/images/registerBg.jpg);
}
.center .login-wrap .loginUp{
    width: 272px;
    height: 358px;
    background-color: #fff;
    float: right;
    margin: 76px 100px 0 0;
    padding: 0 20px;
}
.center .login-wrap .loginUp .shortcut{
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    line-height:36px;
    margin: 20px 0 25px 0;
}
.center .login-wrap .loginUp .input{
    width: 257px;
}
.center .login-wrap .loginUp .input select {
    width: 119px;
    height: 32px;
    float: left;
    border: 1px solid #CCCCCC;
}
.center .login-wrap .loginUp .input select:focus{
    outline: none;
    border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .phone{
    float: right;
    width: 90px;
    height: 31px;
    border: 1px solid #CCCCCC;
    padding: 0 18px;
}
.center .login-wrap .loginUp .input .phone:focus{
    outline: none;
    border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .code{
    width: 128px;
    height: 30px;
    padding: 0 18px;
    border: 1px solid #CCCCCC;
    margin: 15px 0;
}
.center .login-wrap .loginUp .input .code:focus{
    outline: none;
    border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .getCode{
    float: right;
    width: 86px;
    height: 32px;
    color: #666666;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #cccccc;
    background-color: #fff;
    margin: 15px 0;
}
.center .login-wrap .loginUp .input .getCode:focus{
    outline: none;
    border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input .password{
    width: 220px;
    height: 30px;
    padding: 0 18px;
    border: 1px solid #CCCCCC;
}
.center .login-wrap .loginUp .input .password:focus{
    outline: none;
    border: 1px solid #aaa;
}
.center .login-wrap .loginUp .input p{
    line-height:20px;
    margin: 10px 0;
    color: #FF6633;
}
.center .login-wrap .loginUp .input .register{
    width: 256px;
    height: 34px;
    background-color: #FF6633;
    border: none;
    color: #fff;
    font-size: 14px;
}
.center .login-wrap .loginUp .checkbox{
    margin-top: 10px;
}
.center .login-wrap .loginUp .agreement p a{
    color: #0000EE;
    text-decoration: underline;
}
</style>